<template>
  <a-card :bordered="false">
    <div class="card-title">{{ $route.meta.title }}</div>
    <a-spin :spinning="isLoading">
      <a-form-model
        ref="myForm"
        class="my-form"
        :model="formData"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
      >
        <a-form-model-item label="活动名称" prop="name" :rules="{ required: true, message: '请输入活动名称' }">
          <a-input v-model="formData.name" />
        </a-form-model-item>

        <a-form-model-item
          label="推送内容"
          prop="content_type"
          :rules="{ required: true, message: '请选择推送内容' }"
        >
          <a-radio-group v-model="formData.content_type">
            <a-radio
              v-for="(item, index) in ContentTypeEnum.data"
              :value="item.value"
              :key="index"
            >{{ item.name }}</a-radio>
          </a-radio-group>
        </a-form-model-item>

        <a-form-model-item
          v-if="formData.content_type == ContentTypeEnum.SWIPER.value"
          label="间隔时间"
          :prop="`content_config[${ContentTypeEnum.SWIPER.value}].interval`"
          :rules="{ required: true, message: '请输入间隔时间' }"
        >
          <a-input-number
            v-model="formData.content_config[ContentTypeEnum.SWIPER.value].interval"
            :min="1"
            :max="120"
            :precision="0"
          />
          <span class="ml-8">秒钟后切换</span>
        </a-form-model-item>

        <a-form-model-item :wrapperCol="{ span: wrapperCol.span, offset: labelCol.span }">
          <!-- 单图广告 -->
          <div v-if="formData.content_type == ContentTypeEnum.SINGLE.value">
            <AdPicture v-model="formData.content_config[ContentTypeEnum.SINGLE.value]" />
          </div>
          <!-- 多图轮播 -->
          <div v-if="formData.content_type == ContentTypeEnum.SWIPER.value">
            <Swiper v-model="formData.content_config[ContentTypeEnum.SWIPER.value].adList" />
          </div>
        </a-form-model-item>

        <a-form-model-item
          label="弹窗关闭方式"
          prop="close_mode"
          :rules="{ required: true, message: '请选择弹窗关闭方式' }"
        >
          <a-radio-group v-model="formData.close_mode">
            <a-radio
              v-for="(item, index) in CloseModeEnum.data"
              :value="item.value"
              :key="index"
            >{{ item.name }}</a-radio>
          </a-radio-group>
        </a-form-model-item>

        <a-form-model-item
          v-show="formData.close_mode == CloseModeEnum.AUTO.value"
          label="倒计时"
          prop="seconds"
          :rules="{ required: true, message: '请输入倒计时' }"
        >
          <a-input-number v-model="formData.seconds" :min="2" :max="120" :precision="0" />
          <span class="ml-8">秒钟后自动关闭弹窗</span>
        </a-form-model-item>

        <a-form-model-item
          label="投放的页面"
          prop="pages"
          :rules="{ required: true, message: '请至少选择1个投放的页面' }"
        >
          <a-checkbox-group v-model="formData.pages">
            <a-checkbox
              v-for="(item, index) in PagesEnum"
              :value="item.path"
              :key="index"
            >{{ item.name }}</a-checkbox>
          </a-checkbox-group>
        </a-form-model-item>

        <a-form-model-item
          label="推荐频次"
          prop="frequency"
          :rules="{ required: true, message: '请选择推荐频次' }"
        >
          <a-radio-group v-model="formData.frequency">
            <a-radio
              v-for="(item, index) in FrequencyEnum.data"
              :value="item.value"
              :key="index"
            >{{ item.name }}</a-radio>
          </a-radio-group>
          <div class="form-item-help">
            <small v-if="formData.frequency == FrequencyEnum.ONCE.value">用户浏览过一次后，不再向该用户继续推送</small>
            <small v-if="formData.frequency == FrequencyEnum.EVERY_DAY.value">用户每天第一次进入店铺时推送</small>
          </div>
        </a-form-model-item>

        <a-form-model-item
          label="活动时间"
          prop="betweenTime"
          :rules="[{ required: true, message: '请输入活动时间' }]"
        >
          <a-range-picker v-model="formData.betweenTime" format="YYYY-MM-DD HH:mm:ss" />
        </a-form-model-item>

        <a-form-model-item
          label="活动状态"
          prop="status"
          :rules="[{ required: true, message: '请选择活动状态' }]"
        >
          <a-radio-group v-model="formData.status">
            <a-radio :value="1">开启</a-radio>
            <a-radio :value="0">关闭</a-radio>
          </a-radio-group>
        </a-form-model-item>

        <a-form-model-item label="排序" prop="sort" :rules="[{ required: true, message: '请填写排序数值' }]">
          <a-input-number v-model="formData.sort" :min="0" autocomplete="off" />
          <div class="form-item-help">
            <small>数字越小越靠前</small>
          </div>
        </a-form-model-item>

        <a-form-model-item :wrapperCol="{ span: wrapperCol.span, offset: labelCol.span }">
          <a-button type="primary" :loading="confirmLoading" @click="handleSubmit">保存</a-button>
        </a-form-model-item>
      </a-form-model>
    </a-spin>
  </a-card>
</template>

<script>
import moment from 'moment'
import { cloneDeep } from 'lodash'
import { assignment, assignFormData } from '@/utils/util'
import * as Api from '@/api/market/promote'
import { ContentTypeEnum, CloseModeEnum, FrequencyEnum } from '@/common/enum/market/promote'
import { AdPicture, Swiper } from './modules'

// 投放的页面
const PagesEnum = [
  { name: '首页', path: 'pages/index/index' },
  { name: '分类页', path: 'pages/category/index' },
  { name: '购物车页', path: 'pages/cart/index' },
  { name: '个人中心', path: 'pages/user/index' }
]

// 默认配置
const contentConfig = {
  [ContentTypeEnum.SINGLE.value]: { imageUrl: null, link: null },
  [ContentTypeEnum.SWIPER.value]: { adList: [{ imageUrl: null, link: null }], interval: 3 },
}

// 默认数据
const defaultData = {
  name: '',
  content_type: ContentTypeEnum.SINGLE.value,
  content_config: contentConfig,
  close_mode: CloseModeEnum.MANUAL.value,
  seconds: 3,
  pages: PagesEnum.map(item => item.path),
  frequency: FrequencyEnum.ONCE.value,
  betweenTime: null,
  status: 1,
  sort: 100,
}

export default {
  components: { AdPicture, Swiper },
  data () {
    return {
      // 标签布局属性
      labelCol: { span: 4 },
      // 输入框布局属性
      wrapperCol: { span: 12 },
      // 加载状态
      isLoading: false,
      confirmLoading: false,
      // 当前记录详情
      formData: cloneDeep(defaultData),
      // 当前活动ID
      promoteId: null
    }
  },
  created () {
    // 批量给当前实例赋值
    assignment(this, { PagesEnum, ContentTypeEnum, CloseModeEnum, FrequencyEnum })
  },
  methods: {

    // 确认按钮
    handleSubmit (e) {
      const app = this
      app.$refs.myForm.validate(valid => {
        if (!valid || !app.customValidate()) {
          return
        }
        this.confirmLoading = true
        Api.add({ form: app.formData })
          .then(result => {
            app.$message.success(result.message, 1.5)
            setTimeout(() => this.$router.push('./list'), 1200)
          })
          .finally(result => app.confirmLoading = false)
      })
    },

    // 自定义验证
    customValidate () {
      const app = this
      const { formData } = app
      // 单图广告
      if (formData.content_type == ContentTypeEnum.SINGLE.value) {
        const adItem = formData.content_config[ContentTypeEnum.SINGLE.value]
        if (!app.validateAdItem([adItem])) {
          return false
        }
      }
      // 多图轮播
      if (formData.content_type == ContentTypeEnum.SWIPER.value) {
        const adList = formData.content_config[ContentTypeEnum.SWIPER.value].adList
        if (!app.validateAdItem(adList)) {
          return false
        }
      }
      return true
    },

    // 自定义验证：广告图片
    validateAdItem (data) {
      for (const index in data) {
        if (!data[index].imageUrl) {
          this.$message.info('请选择广告图片')
          return false
        }
      }
      return true
    },

  }
}
</script>
<style lang="less" scoped>
.ant-form-item {
  .ant-form-item {
    margin-bottom: 0;
  }
}

/deep/.ant-form-item-control {
  padding-left: 10px;
  .ant-form-item-control {
    padding-left: 0;
  }
}
</style>
